<template>
  <div class="oplog">
    <gl-breadcrumb class="mb15"
                   text="操作日志"></gl-breadcrumb>
    <div class="container">
      <div class="header">
        <div class="dateSelect">
          <el-date-picker v-model="dateValue"
                          type="daterange"
                          :default-time="[,'23:59:59']"
                          range-separator="~"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          @change="getDate">
          </el-date-picker>

          <el-select v-model="userValue"
                     placeholder="请选择操作者"
                     class="ml20"
                     clearable
                     @clear="clear"
                     @change="choiceUser">
            <el-option v-for="item in userList"
                       :key="item.id"
                       :label="item.username"
                       :value="item.id">
            </el-option>
          </el-select>

        </div>

      </div>
      <div class="main">
        <gl-table :columns='list'
                  :data="lists"
                  class="gl-table"
                  @button="changeButton">
        </gl-table>
        <gl-pagination :total='totals'
                       class="page"
                       :curr="curr"
                       :size="limits"
                       @callback='changePage'></gl-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Oplog',
  components: {},
  data() {
    return {
      userList: [{ username: '全部', id: '0' }],
      userValue: '',
      dateValue: '',
      listParams: {
        start_time: '',
        end_time: ''
      },
      lists: [],
      list: [
        { label: '操作编号', prop: 'id' },
        { label: '操作者', prop: 'username' },
        { label: '操作日期', prop: 'time' },
        { label: 'IP地址', prop: 'ip' },
        { label: '操作内容', prop: 'content' }
      ],
      totals: 0,
      curr: 1,
      limits: 10
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  watch: {},
  methods: {
    // 日志列表
    getLogList() {
      let params = {
        curr: this.curr,
        limits: this.limits,
        uid: this.userValue ,
        start_time: this.listParams.start_time,
        end_time: this.listParams.end_time
      }
      this.http
        .$post('admin2/log.Api/member_operate_log_list', params, {
          loading: true
        })
        .then(res => {
            this.totals = res.total
            this.lists = res.list
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 分页
    changePage(val) {
      this.curr = val.curr
      this.limits = val.size
      this.getLogList()
    },

    // 确定
    addOrder() {},

    // 客户列表
    getAccount() {
      this.http
        .$post('admin2/user.api/user_all_lists')
        .then(res => {
          res.map(val => {
            this.userList.push(val)
          })
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },

    // 日期
    getDate() {
      let { listParams, dateValue } = this
      ;[listParams.start_time, listParams.end_time] = dateValue || []
      listParams.start_time /= 1000
      listParams.end_time /= 1000
      this.curr =1
      this.getLogList()
    },
    // 选择用户
    choiceUser() {
      this.curr = 1
      this.getLogList()
    },
    
  },
  created() {
    this.getLogList()
    this.getAccount()
  },
  mounted() {}
}
</script>
<style lang='less' scoped>
.oplog {
  margin: 0 auto;

  .container {
    background: #fff;
    padding: 30px 20px;
    .header {
      .dateSelect {
        padding-bottom: 20px;
      }
    }
  }
  .main {
    .gl-table {
      text-align: center;
    }
  }
}
</style>